<template>
	<view class="layout">
		<!-- 导航栏 -->
		<navgate-bar-vue :isBack="true" title="历史评论"></navgate-bar-vue>

		<view class="comment-box" v-for="(item, index) in commentList" :key="index">
			<view class="comment-title">
				<view class="comment-ranking">榜单:</view>
				<view class="comment-topic">{{ item.topic }}</view>
			</view>
			<view class="comment-status-box">
				<view class="comment-ranking">评论内容:</view>
				<view class="comment-comment">{{ item.content }}</view>
			</view>
			<view class="comment-time-box">
				<view class="comment-time">{{ formatTime(item.createTime) }}</view>
				<view class="comment-status"
					:class="{'status-normal': item.status === '1', 'status-blocked': item.status === '0'}">
					{{ item.status === '1'? '正常' : '屏蔽' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		AppGetHistoryCommentApi
	} from '@/api/my';
	import {
		useUserStore
	} from '@/store';
	import {
		formatTime
	} from '@/utils/time';

	// 获取本地数据
	const userStore = useUserStore();
	const userId = ref(userStore.id);
	const commentList = ref([]);

	// 获取历史评论数据
	const getCommentList = async () => {
		const response = await AppGetHistoryCommentApi(userId.value);
		if (response && response.data) {
			commentList.value = response.data;
		}
	};

	// 页面加载时调用
	onMounted(() => {
		getCommentList();
	});
</script>

<style lang="scss" scoped>
	.layout {
		width: 100%;
		background-color: #fff;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.comment-box {
		width: 80%;
		margin: 20rpx auto;
		background-color: #f6f6f6;
		border-radius: 15rpx;
		padding: 10rpx;

		.comment-title {
			display: flex;
		}

		.comment-topic {
			margin-left: 20rpx;
		}

		.comment-comment {
			margin-left: 2em;
			color: #666;
		}

		.comment-time-box {
			display: flex;
			margin-top: 10rpx;
			justify-content: flex-end;
			align-items: center;
		}

		.comment-time {
			color: #999;
			font-size: 20rpx;
		}

		.comment-status {
			font-size: 20rpx;
			margin: 10rpx;
			padding: 5rpx 10rpx;
			border-radius: 10rpx;
			font-weight: bold;
		}

		/* 状态样式 */
		.status-normal {
			color: #008000;
			background-color: #e6ffe6;
		}

		.status-blocked {
			color: #ff0000;
			background-color: #ffe6e6;
		}
	}
</style>